<template>
  <div class="card" style="height: 100%">
    <el-descriptions style="width: 600px" title="基本信息 📚" :column="1" border>
      <template #extra>
        <el-button type="primary" @click="openDialog('password')">{{ $t("common.changePassword") }}</el-button>
      </template>

      <el-descriptions-item label="头像">
        <el-row style="align-items: center">
          <div class="avatar">
            <el-image :preview-src-list="[userInfo.avatar]" :src="userInfo.avatar" fit="cover" alt="" v-if="userInfo.avatar" />
            <el-image v-else src="@/assets/images/avatar.gif" alt="avatar" />
          </div>
          <UploadImg
            width="100px"
            height="30px"
            :image-url="userInfo.avatar"
            :drag="false"
            :only-btn="true"
            :show-success-msg="false"
            :file-size="100"
            unit="K"
            @update:image-url="avatarChange"
          >
            <template #empty>
              <!-- <el-icon><Avatar /></el-icon> -->
              <el-button text type="primary"> 上传头像</el-button>
            </template>
            <!-- <template #tip> 圆形组件（禁止拖拽上传） </template> -->
          </UploadImg>
        </el-row>
      </el-descriptions-item>

      <el-descriptions-item :span="2" label="用户名"> {{ userInfo.userName }}</el-descriptions-item>
      <el-descriptions-item :span="2" label="用户昵称"> {{ userInfo.nickName }}</el-descriptions-item>
      <el-descriptions-item label="手机号码"> {{ userInfo.phonenumber }} </el-descriptions-item>
      <el-descriptions-item label="用户邮箱"> {{ userInfo.email }} </el-descriptions-item>
      <el-descriptions-item label="所属部门"> {{ userInfo.dept.deptName }} </el-descriptions-item>
      <el-descriptions-item label="所属角色">
        {{ userInfo.roles.map(item => item.roleName).join("、") }}
      </el-descriptions-item>
    </el-descriptions>
    <PasswordDialog ref="passwordRef"></PasswordDialog>
    <MobileDialog ref="mobileRef"></MobileDialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, toRef, toRefs } from "vue";
import MobileDialog from "./common/MobileDialog.vue";
import PasswordDialog from "@/layouts/components/Header/components/PasswordDialog.vue";
import UploadImg from "@/components/Upload/Img.vue";

import { useUserStore } from "@/stores/modules/user";
import { BackStageApi } from "@/api/modules";
import { ElMessage } from "element-plus";
const userStore = useUserStore();
const userInfo = computed(() => {
  return userStore.userInfo;
});

const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
const mobileRef = ref<InstanceType<typeof MobileDialog> | null>(null);
const userDetailForm = ref<any>({});
const openDialog = (type: string) => {
  if (type == "password") {
    passwordRef.value?.openDialog();
    userDetailForm.value = JSON.parse(JSON.stringify(userInfo.value));
  }
  if (type == "mobile") {
    mobileRef.value?.openDialog();
  }
};
const avatarChange = async url => {
  const params = {
    avatar: url,
  };
  let res = await BackStageApi.updateUserAvatar(params);
  if (res.code == 200) {
    ElMessage({
      message: "头像上传成功！",
      type: "success",
    });
    userStore.getUserInfo();
  }
};
</script>
<style lang="scss" scoped>
.avatar {
  width: 80px;
  height: 80px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 50%;
  :deep(.el-image) {
    width: 100%;
    height: 100%;
  }
}
</style>
